<template>
    <div>
        <div class="filter-container justify-between">
            <div>
                <el-switch v-model="multi" inactive-text="批量操作"></el-switch>
                <template v-if="multi">
                    <el-button size="mini" class="" type="info" @click="downloadExcel()">导出数据</el-button>
                </template>
            </div>
            <div>
                <el-select @change='doSearch' style="width: 150px" class="filter-item" v-model="listQuery.dept_id"
                           placeholder="全部部门">
                    <el-option label="全部部门" value=""></el-option>
                    <el-option v-for="(item,index) in dept_list" :key="item.id" :label="item.name"
                               :value="item.id"></el-option>
                </el-select>
                <el-select @change='doSearch' style="width: 150px" class="filter-item" v-model="listQuery.job_id"
                           placeholder="全部岗位">
                    <el-option label="全部岗位" value=""></el-option>
                    <el-option v-for="(item,index) in job_list" :key="item.id" :label="item.name"
                               :value="item.id"></el-option>
                </el-select>
                <el-date-picker class="filter-item" style="width:280px;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="listQuery.start_time"
                                type="datetime"
                                placeholder="选择日期时间">
                </el-date-picker>
                <el-date-picker  class="filter-item" style="width:280px;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                 v-model="listQuery.end_time"
                                 type="datetime"
                                 placeholder="选择日期时间">
                </el-date-picker>
                <el-input @keyup.enter.native="doSearch" style="width: 200px;" class="filter-item" placeholder="输入名称搜索"
                          v-model="listQuery.keyword">
                </el-input>
                <el-button  class="filter-item" type="primary" v-waves icon="el-icon-search" @click="doSearch">搜索
                </el-button>

            </div>
        </div>
        <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="给我一点时间"
                  border fit highlight-current-row style="width: 100%" @selection-change="onSelectionChange"
                  height="500">
            <el-table-column v-if='multi' type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column align="left" label="单位">
                <template slot-scope="scope">
                    <span>{{scope.row.dept_name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="岗位">
                <template slot-scope="scope">
                    <span>{{scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="登记数">
                <template slot-scope="scope">
                    <span>{{scope.row.dengji_num }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="录用数">
                <template slot-scope="scope">
                    <span>{{scope.row.luyong_num }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="入职数">
                <template slot-scope="scope">
                    <span>{{scope.row.ruzhi_num }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="录用率">
                <template slot-scope="scope">
                    <span>{{scope.row.luyong_rate }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="入职率">
                <template slot-scope="scope">
                    <span>{{scope.row.ruzhi_rate}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="直通率">
                <template slot-scope="scope">
                    <span>{{scope.row.zhitong_rate}}</span>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="onSizeChange" @current-change="onCurrentChange"
                           :current-page="listQuery.pageNumber" :page-sizes="[12,50,100,10000]"
                           :page-size="listQuery.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
	import Vue from 'vue'
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import DateUtil from '@/utils/dateutil'
	import _ from 'underscore'
	import Qiniu from '@/utils/qiniu'
	import echarts from 'echarts'

	require('echarts/theme/macarons') // echarts theme

	export default {
		directives: {waves},
		data() {
			return {
				multi:true,
				multipleSelection: [],
				dealing: false,
				list: [],
				total: 0,
				listLoading: true,
				listQuery: {
					pageNumber: 1,
					pageSize: 12,
					keyword:'',
					dept_id: '',//(非必要参数)
					job_id: '',
					start_time: '', //开始时间(非必要)
					end_time: '',
				},
				dept_list: [],
				job_list: [],
				company:Store.getters.user.company,
				dataBean: {},
				chart: null,
				DataLoading: true,
			}
		},
		filters: {},
		components: {},
		created() {
			this.loadList()
			this.loadDeptList()
			this.loadJobList()
		},
		mounted() {

		},
		computed: {},
		methods: {
			loadList() {
				this.listLoading = true
				Http.getModel(API.conversionRateList, this.listQuery, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.list = json.data.list
						this.total = parseInt(json.data.total)
						this.listLoading = false
					}
				})
			},
			loadJobList(){
				Http.getModel(API.get_company_job_list, {}, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.job_list = json.data.list
					}
				})
			},
			loadDeptList() {
				Http.getModel(API.get_company_dept_list, {}, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.dept_list = json.data.list
					}
				})
			},
			/***   公用部分 start ***/
			onSelectionChange(val) {
				this.multipleSelection = val;
			},
			doSearch() {
				this.listQuery.page = 1
				if((this.listQuery.start_time&&this.listQuery.end_time)||(!this.listQuery.start_time&&!this.listQuery.end_time)){
					this.loadList()
				}else{
					Msg.error('时间信息不完整！')
				}
			},
			onSizeChange(val) {
				this.listQuery.pageSize = val
				this.loadList()
			},
			onCurrentChange(val) {
				this.listQuery.pageNumber = val
				this.loadList()
			},
			/***   公用部分 end ***/
			downloadExcel(ids){
				if (!ids) {
					if (this.multipleSelection.length == 0) {
						Msg.error("请先选择");
						return false;
					} else {
						ids = _.pluck(this.multipleSelection, "job_id").join(",");
					}
				}
				var DownLoadFile = function (options) {
					var config = $.extend(true, { method: 'post' }, options);
					var $iframe = $('<iframe id="down-file-iframe" />');
					var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
					$form.attr('action', config.url);
					for (var key in config.data) {
						$form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
					}
					$iframe.append($form);
					$(document.body).append($iframe);
					$form[0].submit();
					$iframe.remove();
				}
				var company = this.company;
				var data = {
					ids:ids,
					company_id:company.id
				}
				if(this.listQuery.start_time&&this.listQuery.end_time){
					data.start_time = this.listQuery.start_time
					data.end_time = this.listQuery.end_time
				}
				var params = {
					url:window.server_root+API.downConversion,
					data:data
				}
				console.log("params:",params)
				DownLoadFile(params)
			}
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>

</style>
